<template>
  <div class="container">
    <el-card>
      <div slot="header" class="search-part">
        <article-search @submit="handleSearch" @reback="handleReset"></article-search>
        <el-button type="success" icon="el-icon-edit" @click="addArt = true"
          >新增技巧</el-button
        >
      </div>
      <search-layout :data="tableData" :msg-len="page.total" @update="handleUpdate"></search-layout>
      <div class="page-bar">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="pagesizeSelector"
          :page-size="page.pagesize"
          :total="page.total"
          layout="prev, pager, next, sizes, jumper"
        />
      </div>
    </el-card>
    <article-add
      title="新增文章"
      :dialog-visible="addArt"
      @onclose="addArt = false"
      @onconfirm="handleSubmit"
    ></article-add>
  </div>
</template>

<script>
import { notSame } from '@/utils'
import { list as skillList, add } from '@/api/hmmm/articles'
import articleSearch from '../components/article-search'
import searchLayout from '../components/search-layout'
import articleAdd from '../components/articles-add'

export default {
  components: {
    articleAdd,
    articleSearch,
    searchLayout
  },
  data () {
    return {
      addArt: false,
      tableData: [],
      page: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: undefined,
        total: 0
      },
      pagesizeSelector: [10, 15, 20],
      reset: null
    }
  },
  created () {
    this.getArtList()
  },
  watch: {
    page: {
      deep: true,
      handler () {
        this.getArtList()
      }
    }
  },
  methods: {
    async getArtList () {
      const { data: res } = await skillList(this.page)
      this.page.page = +res.page
      this.page.pagesize = +res.pagesize
      this.page.total = +res.counts
      this.tableData = res.items
      if (this.page.page > res.pages) {
        this.page.page = +res.pages
      }
    },
    async handleSubmit (formData) {
      try {
        await add(formData)
        this.handleUpdate()
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleCurrentChange (newPage) {
      this.page.page = newPage
    },
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
    },
    handleSearch (searchInfo) {
      const newObj = { ...this.page, page: 1, pagesize: this.page.pagesize, ...searchInfo }
      if (notSame(this.reset, newObj)) {
        this.reset = { ...this.page }
        this.page = newObj
      }
    },
    handleReset () {
      if (this.reset && Object.keys(this.reset).length) {
        this.page = this.reset
      }
    },
    async handleUpdate () {
      try {
        await this.getArtList()
        this.$message.success('更新成功')
      } catch (e) {
        this.$message.error(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-card__header {
  border-bottom: 0;
}
::v-deep .search-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-bar {
  display: flex;
  justify-content: flex-end;
}
</style>
